<template>
  <div>
    <div class="headimg">
      <img src="http://shangke2.oss-cn-qingdao.aliyuncs.com/app/t1_1508300346000/sundage.jpg" alt="">
    </div>
    <!-- <div class="condiv">
      <yd-button size="small" type="primary" shape="circle" bgcolor="#FF9800" color="#fff">领取优惠券</yd-button>
    </div> -->
    <yd-search placeholder="关键字搜索    想吃的/想玩的/想住哪" v-model="searchtext" :on-submit="submitHandler"></yd-search>
   <!-- 列表 -->
  <div v-for ="item in outdata" :key="item.index" @click="tiaozhuan(item)">
    <div style="padding-left:10px;padding-right:10px">
        <img :src="item.img" class="tj-img" >
    </div>  
    <!-- 图下面第一排字 -->
    <div>
      <span style="padding-left:10px;padding-right:10px;color:grey">
      {{item.name}}|{{item.address}}
      </span>
      <span style="padding-left:10px;padding-right:10px;float:right;color:grey">
      ￥200起
      </span>
    </div> 
     <!-- 图下面第二排字 -->
     <div>
      <span style="padding:10px;font-size:15px">
      {{item.name}}
      </span>
      <span style="padding:10px;font-size:15px">
      {{item.address}}
      </span>
     </div>
     <div style="padding-left:10px;padding-top:5px">
        <yd-rate slot="left" v-model="item.star" size="18px"></yd-rate>
     </div>

  </div>

  </div> 
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      username: '',
      mobile: '',
      idcard: '',
      result: '',
      search: '',
      outdata: '',
      rate6: 4,
      rate1: 1,
      // swiper 参数设置 详见
      swiperOption: {
        pagination: '.swiper-pagination',
        slidesPerView: 'auto',
        centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true
      },
      searchtext: ''
    }
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.trafficList,
        data: {

        },
        success: (resultData) => {
          this.outdata = resultData.data.results;
          console.log(this.outdata);
        }
      });
    },
    info() {
      alert('123');
    },
    tiaozhuan(item) {
      this.$router.push({path: 'rentComInfo', query: item})
    },
    submitHandler (value) {
      this.hdAjax({
        url: this.API.findPlaceNameList,
        method: 'POST',
        data: {
          type: 'T',
          name: value
        },
        success: (resultData) => {
          this.outdata = resultData.data.results;
        }
      });
    }

  }
}
</script>

<style>
body{
  font-family: '微软雅黑'
}
header{
  background-color: #393A3F;
}
.tj-img{
  height: 3rem;
  width: 100%;
  margin-top: 10px;
}
.yd-input{
  width: 100%;
}
.yd-input input{
  width: 100%;
}
.swidiv{
  float: left;
}
.mapbut{
  border: 1px solid #000;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  position: fixed;
  width: 25%;
  height: 35px;
  line-height: 35px;
  left: 37.5%;
  bottom: 10px;
  z-index: 100;
}
.mapbut .icon-ucenter-outline:before {
  content: "\E616";
  color: #000;
}
.skljx{
  width: 100%;
  height: 80px;
  padding: 5px 10px;
}
.skljxt{
  font-size: 14px;
}
.skljgl{
  position: relative;
  border-radius: 15px;
  top: -120px;
  left: 10px;
  width: 30px;
  height: 25px;
}
.skljxt2{
  font-size: 12px;
}
.skljxr{
  float: right;
  font-size: 12px;
}
.zn{
  position: relative;
  border-radius: 15px;
  top: -48px;
  left: -110px;
  width: 30px;
  height: 25px;
}
.ddxgzn{
  position: relative;
  border-radius: 15px;
  top: -40px;
  left: 10px;
  width: 30px;
  height: 25px;
}
.ddxg img{
  width: 100%;
  height: 300px;
}
.sklj img{
  width: 100%;
  height: 300px;
}
.icon-ucenter-outline:before {
    content: "\E616";
    color: #fff;
}
.back-icon:before {
    content: "\E607";
    color: #fff;
}
element.style {
    color: #fff;
}
.navbar-item>a {
  color: #fff;
}
.headimg img{
  width: 100%;
  height: 250px;
}
.condiv{
  padding: 10px 10px;
}
.condiv button{
  font-size: 14px;
  width: 40%;
  height: 45px;
}
.m-cell {
  background-color: #218B98;
  padding: 10px;
  margin-bottom: -10px;
}
.cell-item{
  height: 40px;
  padding: 0px;
  background-color: #fff;
  border-radius: 8px;
}
.cell-right{
  min-height: 0px;
}
.imgsli{
  min-width: 100%;
  height: 300px;
}
.imgsli li{
  float: left;
  width: 70%;
  height: 300px;
  border: 2px solid #000;
}
.zdytop{
  margin-top: 10px;
  width: 100%;
  height: 50px;
  padding: 10px;
}
.zdyleft{
  float: left;
  width: 50%;
  height: 50px;
  margin-left: 0px;
  float: left;
  text-align: left;
}
.zdyleft-top{
  font-size: 18px;
}
.zdyleft-button{
  color: #D0D0D0;
}
.zdyright{
  float: right;
  font-size: 12px;
  width: 50%;
  height: 30px;
  margin-right: 0px;
  text-align: right;
  line-height: 30px;
}
.fengexian{
  margin-left: 2%;
  width: 96%;
  border-bottom: 1.5px solid #999999;
  margin-top: 15px;
}
.swiper-container {
  width: 100%;
  margin: 20px auto;
}
.swiper-slide {
  float: left;
  text-align: left;
  font-size: 18px;
  background: #fff;
  width: 60%;

  /* Center slide text vertically */
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.imgjxx{
  position:relative;
  float: left;
  width: 300px;
}
.imgxl{
  float: left;
  margin-top: 3px;
  width: 50%;
  height: 60px;
}
.imgxlt{
  font-size: 14px;
}
.imgxlb{
  font-size: 12px;
}
.imgxr{
  float: right;
  text-align: center;
  margin-top: 3px;
  width: 100px;
  font-size: 12px;
  /* overflow:hidden;
  text-overflow:ellipsis; 
  white-space: nowrap; */
}
.hd-img-responsive{
  height: 3.5rem;
  width: 100%;
  
}
.search-icon{
  width: 9%;
}
.yd-search-input>.search-input{
  border-radius: 8px;
}
.yd-search-input{
  background-color: #218B98;
  font-size: .25rem;
}
</style>
